<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单击按钮放大文本</title>
<style>
body{
font-family:微软雅黑}

</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div v-bind:style="{fontSize: fontSize + 'px'}">
  		<my-font v-bind:text="text" v-on:enlarge="fontSize += 2"></my-font>
	</div>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-font', {
	props : ['text'],
	template : '<div> \
		<button v-on:click="action">放大文本</button> \
		<p>{{text}}</p> \
	  </div>',
	methods : {
		action : function(){
			this.$emit('enlarge');
		}
	}
})
//创建根实例
var vm = new Vue({
	el:'#example',
	data: {
        text : '千里之行始于足下',
		fontSize : 16
    }
})
</script>


</body>

</html>



